<template>
  <header class="header">
    <figure class="h-back">
      <img src="../assets/logo.png">
    </figure>
    <div class="h-title">{{title}}</div>
    <figure class="h-next">
      <!-- <img src="../assets/logo.png"> -->
    </figure>
  </header>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: ['title']
}
</script>

<style scoped lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.header{
 @h:50px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  .pxToRem(height,80);
  display: flex;
 background-image: linear-gradient(90deg,#0af,#0085ff);
  // box-shadow: 0 5px 5px #ccc;
  figure{
     .pxToRem(width,80);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    img{
     .pxToRem(width,40);
      .pxToRem(height,40);
    }
  }
  div{
    flex: 1;
    text-align: center;
   .pxToRem(line-height,80);
    color: #fff;
    .pxToRem(font-size,30);
   
  }
}
</style>
